<template>
	<view class="home">
		<!-- 轮播 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item in swipers" :key="item.id">
				<image :src="item.img"></image>
			</swiper-item>
		</swiper>
		<!-- 导航 -->
		<view class="nav">
			<view class="nav_item" v-for="(item,index) in navs" :key="index">
				<view :class="item.icon">
				</view>
				<text>{{item.title}}</text>
			</view>
		</view>
		<!-- 推荐 -->
		<view class="hot_goods">
			<view class="tit">
				推荐商品
			</view>
			<view class="goods_list">
				<view class="goods_item" v-for="(item,index) in goods" :key="index">
					<image :src="item.img_url"></image>
					<view class="price">
						<text>￥{{item.sell_price}}</text>
						<text>￥{{item.market_price}}</text>
					</view>
					<view class="name">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import lunbo1 from '../../static/images/lunbo1.jpg'
	import lunbo2 from '../../static/images/lunbo2.jpg'
	import lunbo3 from '../../static/images/lunbo3.jpg'
	export default {
		data() {
			return {
				lunbo: [lunbo2, lunbo1, lunbo3],
				swipers: [],
				goods: [],
				navs: [{
						icon: 'iconfont icon-ziyuan',
						title: '蜜雪超市',
						path: '/pages/goods/goods'
					},
					{
						icon: 'iconfont icon-guanyuwomen',
						title: '联系我们',
						path: '/pages/contact/contact'
					},
					{
						icon: 'iconfont icon-tupian',
						title: '咨讯图片',
						path: '/pages/pics/pics'
					},
					{
						icon: 'iconfont icon-shipin',
						title: '趣乐视频',
						path: '/pages/videos/videos'
					}
				]
			}
		},
		methods: {
			async getSwipers() {
				const res = await this.$myRequest({
					url: '/api/getlunbo'
				})
				this.swipers = res.data.message
				this.swipers.forEach((element, index1) => {
					element.img = this.lunbo[index1]
				});
				console.log(this.swipers,"打印轮播数据")
			},
			async getHotGoods() {
				const res = await this.$myRequest({
					url: '/api/getgoods?pageindex=1'
				})
				this.goods = res.data.message
				console.log(this.goods, "222")
			}
		},
		onLoad() {
			this.getSwipers()
			this.getHotGoods()
		},
	}
</script>

<style lang="scss">
	.home {
		swiper {
			width: 750rpx;
			height: 380rpx;

			image {
				height: 100%;
				width: 100%;
			}
		}

		.nav {
			display: flex;

			.nav_item {
				width: 25%;
				text-align: center;

				view {
					width: 120rpx;
					height: 120rpx;
					background: #3a4861;
					border-radius: 60rpx;
					margin: 10px auto;
					line-height: 120rpx;
					color: #fff;
					font-size: 40rpx;
				}

				.icon-tupian {
					font-size: 45rpx;
				}

				text {
					font-size: 24rpx;
				}
			}
		}

		.hot_goods {
			background: #eee;
			overflow: hidden;
			margin-top: 10px;

			.tit {
				height: 50px;
				line-height: 50px;
				color: #b50e03;
				text-align: center;
				letter-spacing: 20px;
				background: #fff;
				margin: 7rpx 0;
			}

			.goods_list {
				padding: 0 15rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.goods_item {
					background: #fff;
					width: 355rpx;
					margin: 10rpx 0;
					padding: 15rpx;
					box-sizing: border-box;

					image {
						width: 80%;
						height: 150px;
						display: block;
						margin: auto;
					}

					.price {
						color: #b50e03;
						font-size: 36rpx;
						margin: 20rpx 0 5rpx 0;

						text:nth-child(2) {
							color: #ccc;
							font-size: 28rpx;
							margin-left: 17rpx;
							text-decoration: line-through;
						}
					}

					.name {
						font-size: 28rpx;
						line-height: 50rpx;
						padding-bottom: 15rpx;
						padding-top: 10rpx;
					}
				}
			}
		}
	}
</style>
